<template>
  <div>
    标题:<a-input style="width: 300px" v-model:value="question['text']"></a-input>
    跳题:
    <!-- 跳题逻辑区域 -->
    <div>
      <h4>跳题逻辑:</h4>
      <div v-for="(logic, index) in question.ruleLogic.jumpLogic" :key="index">
        <!-- 显示跳题逻辑中的 matchValue 对应的选项 text -->
        如果选中
        {{ getOptionText(logic.matchValue) }}
        则跳转至题目 {{ logic.targetQuestionId }}
        <a-button @click="removeJumpLogic(index)" type="link" danger>删除</a-button>
      </div>

      <!-- 添加新的跳题逻辑 -->
      <h4>添加新的跳题逻辑:</h4>
      <a-select v-model:value="newJumpLogic.matchValue" style="width: 200px" placeholder="选择选项">
        <a-select-option v-for="option in question.options" :key="option.value" :value="option.value">
          {{ option.text }}
        </a-select-option>
      </a-select>
      <a-input v-model:value="newJumpLogic.targetQuestionId" style="width: 200px; margin-left: 10px" placeholder="目标题目 ID" />
      <a-button @click="addJumpLogic" type="primary" style="margin-left: 10px">添加跳题逻辑</a-button>
    </div>
  </div>
</template>

<script setup>
import {defineProps, reactive, ref} from 'vue';
import {useQuestions} from "@/utils/paper.js";
const { getQuestionById } = useQuestions()
const props = defineProps({
  questionId:{
    type: String
  }
});
const questionId=props.questionId;// 该题的id
const question=getQuestionById(questionId) ;// 根据Id查询题目——为啥这玩意是双向绑定的？
// 存储添加跳题逻辑的临时数据
const newJumpLogic = reactive({
  matchValue: null,
  targetQuestionId: ''
});

// 获取选项文本
const getOptionText = (matchValue) => {
  const option = question.options.find(opt => opt.value === matchValue);
  return option ? option.text : '';
};

// 添加跳题逻辑
const addJumpLogic = () => {
  if (newJumpLogic.matchValue && newJumpLogic.targetQuestionId) {
    question.ruleLogic.jumpLogic.push({ matchValue:newJumpLogic.matchValue,targetQuestionId:newJumpLogic.targetQuestionId , isUsing: true });
    newJumpLogic.value = { matchValue: null, targetQuestionId: '' }; // 重置输入框
  }
};

// 删除跳题逻辑
const removeJumpLogic = (index) => {
  question.ruleLogic.jumpLogic.splice(index, 1);
};

</script>
